<template>
	<div style="border-radius: 5px; padding: 10px;">
		<el-form ref="form" :model="form" label-width="100px" size="small" style="border: solid 1px #EBEEF5;">
			<el-row style = "margin-top: 10px;">
				<el-col :span="8">
					<el-form-item label="用户名称:">
						<el-input style="width: 90%;" clearable v-model="form.nikeName" placeholder="请输入用户名"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="用户角色:">
						<el-select v-model="form.roleId" @change="selectChange" clearable placeholder="请选择角色" style="width: 90%;">
							<el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName" :value="item.roleId">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="用户状态:">
						<el-select v-model="form.status" clearable placeholder="请选择状态" style="width: 90%;">
							<el-option label="可用" value="1"></el-option>
							<el-option label="不可用" value="0"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
						<el-button type="success" icon="el-icon-circle-plus-outline" @click="addOrUpdate(id='',flag=1)">新增</el-button>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>

		<el-table :data="tableData" border style="margin-top: 10px;" v-loading="dataListLoading">
			<el-table-column fixed prop="managerId" label="managerId" align="center" width="100">
			</el-table-column>
			<el-table-column prop="loginName" label="用户名" align="center" header-align="center">
			</el-table-column>
			<el-table-column prop="nikeName" label="昵称" align="center" header-align="center">
			</el-table-column>
			<el-table-column prop="phone" label="电话" align="center" header-align="center">
			</el-table-column>
			<el-table-column prop="email" label="邮箱" align="center" header-align="center">
			</el-table-column>
			<el-table-column prop="roleName" label="角色" align="center" header-align="center">
			</el-table-column>
			<el-table-column prop="updateTime" label="修改日期" align="center" header-align="center">
				<template slot-scope="scope">
					{{scope.row.updateTime | formatDate}}
				</template>
			</el-table-column>
			<el-table-column prop="status" :formatter="status" label="状态" align="center" width="120">
				<!-- <template slot-scope = "scope">
							<el-tag v-if="scope.row.status===0" size="small" type="danger">
								不可用
							</el-tag>
							<el-tag v-else size="small">可用</el-tag>
							<!-- <span v-if="scope.row.status===0" >不可用</span>
							<span v-else>可用</span> 
						</template> -->
			</el-table-column>
			<el-table-column label="操作" align="center" width="120">
				<template slot-scope="scope">
					<el-button @click="addOrUpdate(scope.row.managerId,flag=2)" type="text" size="small">编辑</el-button>
					<el-button @click="deleteManager(scope.row.managerId)" type="text" size="small">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageIndex"
		 :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
		</el-pagination>
		<!-- 弹窗, 新增 / 修改 -->
		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getManagerData"></add-or-update>
	</div>
</template>

<script>
	import {
		getManagerList,
		deleteManager
	} from '@/api/system/manager/manager.js'
	import {
		getRoleList
	} from '@/api/system/role/role.js'
	import {
		formatDate
	} from '@/utils/common.js'
	import addOrUpdate from './addOrUpdate'
	//const status = {boolean:{0:'不可用',1:'可用',2:'已删除'}}
	export default {
		created: function() {
			/* alert(document.documentElement['clientHeight'])
			alert(document.documentElement['clientWidth']) */
			this.getManagerData(this.form.nikeName, this.form.roleId, this.form.status, this.pageIndex, this.pageSize);
			this.getRoleData();
		},
		filters: {
			formatDate(time) {
				var date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm');
			}
		},
		components: {
			addOrUpdate
		},
		methods: {
			getManagerData(nikeName, roleId, status, index, size) {
				this.dataListLoading = true
				getManagerList(nikeName, roleId, status, index, size).then(data => {
					//console.log(data);
					if (data.code == '0000') {
						this.tableData = data.data;
						this.pageTotal = data.total;
					} else {
						this.$message.error(data.msg)
					}
				})
				this.dataListLoading = false
			},
			status(form) {
				return form.status == 1 ? '可用' : '不可用'
			},
			getRoleData(roleName, status, index, size) {
				getRoleList(null, 1, 1, 9999).then(data => {
					//console.log(data);
					this.roleList = data.data;
				})
			},
			selectChange() {
				this.$forceUpdate()
			},
			deleteManager(managerId) {
				this.$confirm(`是否删除用户${managerId}?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					center:true
				}).then(() => {
					deleteManager(managerId).then(data => {
						if (data.code == '0000') {
							this.$message.success(data.msg)
							this.getManagerData(this.form.nikeName, this.form.roleId, this.form.status, this.pageIndex, this.pageSize)
						} else {
							this.$message.error(data.msg)
						}
					})
				}).catch(() => {
					this.$message.info(`已取消删除用户${managerId}`);
				})

			},
			onSubmit() {
				this.getManagerData(this.form.nikeName, this.form.roleId, this.form.status, this.pageIndex, this.pageSize);
			},
			handleSizeChange(val) {
				this.pageSize = val
				this.pageIndex = 1
				this.getManagerData(this.form.nikeName, this.form.roleId, this.form.status, this.pageIndex, this.pageSize)
			},
			handleCurrentChange(val) {
				this.pageIndex = val;
				this.getManagerData(this.form.nikeName, this.form.roleId, this.form.status, this.pageIndex, this.pageSize)
			},
			addOrUpdate(id, flag) {
				this.addOrUpdateVisible = true
				this.$nextTick(() => {
					this.$refs.addOrUpdate.init(id, flag)
				})
			}
		},
		data() {
			return {
				form: {},
				tableData: [],
				pageIndex: 1,
				pageSize: 10,
				pageTotal: 0,
				roleList: [],
				addOrUpdateVisible: false,
				dataListLoading: false
			}
		}
	}
</script>

<style>
</style>
